<!-- 库存 -->
<template>
    <!-- 顶部标题 -->
    <view class="Login">
        <!-- 顶部标题栏 -->
        <TopBar title="库存查询"></TopBar>

        <!-- 功能区 -->
        <view class="function">
            <view class="function-input">
                <view class="function-input1">
                    <view class="function-input1-checkbox-box">
                        <checkbox value="cb" selectedColor="#3399FF" class="function-input1-checkbox" :checked="true" />
                    </view>
                    <text class="function-input1-text"> 仓库</text>
                    <uni-easyinput errorMessage v-model="input1" focus :styles="{
                        'font-size': '20px',
                        'height': '40px',
                    }"></uni-easyinput>
                    <view class="function-input1-buttonview">
                        <view class="function-input1-button  function-input1-button1"><text style="font-size: 20px; ">...</text></view>
                    </view>
                </view>
                <view class="function-input1">
                    <view class="function-input1-checkbox-box">
                        <checkbox value="cb" class="function-input1-checkbox" :checked="true" />
                    </view>
                    <text class="function-input1-text"> 仓位</text>
                    <uni-easyinput errorMessage v-model="input2" focus :styles="{
                        'font-size': '20px',
                        'height': '40px',
                    }"></uni-easyinput>
                    <view class="function-input1-buttonview">
                        <view class="function-input1-button  function-input1-button1"><text style="font-size: 20px; ">...</text></view>
                    </view>
                </view>
                <view class="function-input1">
                    <view class="function-input1-checkbox-box">

                    </view>

                    <text class="function-input1-text"> 物料</text>
                    <uni-easyinput errorMessage v-model="input3" focus :styles="{
                        'font-size': '20px',
                        'height': '40px',
                    }" style="border-radius: 10px;"></uni-easyinput>
                    <view class="function-input1-buttonview">
                        <view class="function-input1-button  function-input1-button1"><text style="font-size: 20px; ">库存</text></view>
                    </view>

                </view>
                

            </view>
        </view>

        <view>
            <!-- 弹出 -->
            <!-- <button class="button" @click="open"><text class="button-text">底部</text></button> -->
            <!-- <uni-popup ref="popup" type="bottom" border-radius="10px 10px 0 0">底部弹出 Popup 自定义圆角</uni-popup> -->
            <!-- <uni-popup ref="popup" @touchstart.native.passiv>
                <view class="popup-content" >
                    <HouseSelect></HouseSelect>
                </view>
            </uni-popup> -->


             <button @click="open">打开弹窗</button>
   <uni-popup ref="popup" @touchstart.native.passive>
      <view class="popup-content">
        <HouseSelect></HouseSelect>
      </view>
    </uni-popup>
        </view>
    </view>
</template>

<script setup lang="ts">
import { ref } from "vue";
//引入仓库查询
import HouseSelect from '@/components/HouseSelect.vue'




// console.log(menu);
let input1 = ref<string>("");
let input2 = ref<string>("");
let input3 = ref<string>("");
let type = ref<string>("");
const popup = ref<boolean>(false);
// ✅ 正确：声明为 uni-popup 组件的类型
const open = () => {
    // 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
    (popup.value as any).open("bottom")
};


const DT= [
        {
            "WhCode": "C002",
            "WhName": "原料仓",
            "PosCode": "",
            "InvCode": "103005",
            "InvName": "3005",
            "invAddCode": "3005",
            "invModel": null,
            "Batch": "231",
            "ProDate": null,
            "lifeDate": null,
            "OwnerCode": "",
            "Qty": 1037.6
        }
    ]

</script>






<style scoped>
.Login {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    /* margin-top: 40px; */
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    /* justify-content: center; */
    min-height: 100vh;
    background-color: #F7F3F1;
    /* background-image: url("/src/static/log/Loginbg3.png"); */
    background-size: 100% 100%;
}


/* 功能区 */
.function {
    background-color: #F7F3F1;
    width: 100%;
    /* min-height: 100vh; */



}

.function-input {
    width: 100%;
    background-color: #FFFFFF;
    border-radius: 0 0 30px 30px;
    padding: 5px 0px;
}

.function-input1 {
    padding: 2px 10px;
    display: flex;
    height: 45px;
}



.function-input1-checkbox {
    transform: scale(1.2);
    margin: 7px;

}

.function-input1-checkbox-box {
    height: 50px;
    width: 43px;
}

.function-input1-text {
    font-size: 20px;
    color: #333;
    margin-top: 5px;
    margin-right: 15px;
}

.function-input1-buttonview {
    display: flex;
    width: 50px;
    height: 40px;
    margin-left: 10px;
    justify-content: center;

}

.function-input1-button {
    width: 50px;
    height: 40px;
    background-color: #F7F3F1;
    border-radius: 10px;
    background-color: dodgerblue;
    color: #FFFFFF;
}

.function-input1-button1 {
    font-size: 15px;
    line-height: 38px;
    display: flex;
    justify-content: center;
}

/* 弹出层 */
.popup-content {
    /* // 使用 mixin 引入 flex 布局样式 */
    @include flex;
    align-items: center;
    /* 垂直居中对齐子元素（类似把物品垂直摆放在盒子中间） */
    justify-content: center;
    /* 水平居中对齐子元素（类似把物品水平摆放在盒子中间） */
    padding: 15px;
    background-color: #fff;
}


</style>
